import React, { AnchorHTMLAttributes } from "react";
import classNames from "classnames";


export enum ButtonSize {
  Lager = "lg",
  Small = "sm",
}

export enum ButtonType {
  Primary = "primary",
  Default = "default",
  Danger = "danger",
  Link = "link",
}

interface BaseButtonProps {
  className?: string;
  disabled?: boolean;
  size?: ButtonSize;
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
}
//如何找到button的所有原生属性:react提供：react.ButtonHTMLAttributes<HTMLElement>，找到后和BaseButtonProps合并
type NativeButtonProps = BaseButtonProps &
  React.ButtonHTMLAttributes<HTMLElement>;
//找a链接属性
type AnchorButtonProps = BaseButtonProps &
  React.AnchorHTMLAttributes<HTMLElement>;
//有些属性在a链接上是必须的，但是在Button上确不需要，反之亦然，所有需要使用Partial，它可以把属性都设置为可选的
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

const Button: React.FC<ButtonProps> = (props) => {
  const {
    btnType,
    disabled,
    className,
    size,
    children,
    href,
    ...restProps
  } = props;

  //默认有btn，btn-lg,btn-primary这些,拼接
  const classes = classNames("zs-btn", className, {
    [`zs-btn-${btnType}`]: btnType,
    [`zs-btn-${size}`]: size,
    disabled: btnType === ButtonType.Link && disabled,
  });
  if (btnType === ButtonType.Link && href) {
    return (
      <a className={classes} href={href} {...restProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button className={classes} disabled={disabled} {...restProps}>
        {children}
      </button>
    );
  }
};

Button.defaultProps = {
  disabled: false,
  btnType: ButtonType.Default,
};

export default Button;
